<template>
  <!-- 绑定仓库 -->
  <el-dialog :center="true" :visible.sync="visible" width="80%" @close="cancel">
    <div v-loading="loadingdialog">
      <div class="header_title_box">
        <h2>待绑定仓库</h2>
      </div>
      <div class="filter-container">
        <el-input v-model="name" placeholder="仓库名称" class="input-with-select mr64" @keyup.enter.native="query" />
        <el-button type="primary" @click="query">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>
      <div style="height: 250px; overflow: auto;">
        <el-table ref="bindWarehouseTable" v-loading="tableLoading" :data="warehouseListData" tooltip-effect="dark" style="width: 100%" height="250" border>
          <el-table-column label="操作" align="center" fixed width="90px">
            <template slot-scope="scope">
              <span v-if="scope.row.isDisable" class="edit_style" @click="handlebind(scope.row)">绑定</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="仓库名称" prop="name" />
          <el-table-column align="center" label="仓库代码" prop="code" />
          <el-table-column align="center" label="仓库类型" prop="type_text" />
          <el-table-column align="center" label="上级仓库" prop="parent_warehouse" />
          <el-table-column align="center" label="仓库地址" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.state }}/{{ scope.row.city }}/{{ scope.row.street }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="仓库邮编" prop="zipcode" />
          <el-table-column align="center" label="状态" prop="is_active_text" />
          <el-table-column align="center" label="创建人" prop="created_by_name" />
          <el-table-column align="center" label="创建时间" prop="created_at" width="150px" />
          <el-table-column align="center" label="修改人" prop="updated_by_name" />
          <el-table-column align="center" label="修改时间" prop="updated_at" width="150px" />
        </el-table>
      </div>
      <div class="header_title_box mt25">
        <h2>已绑定仓库</h2>
      </div>
      <div class="mb25" style="height: 250px; overflow: auto;">
        <el-table ref="unbindWarehouseTable" :data="unwarehouseListData" tooltip-effect="dark" style="width: 100%" border height="250">
          <el-table-column label="操作" align="center" fixed width="90px">
            <template slot-scope="scope">
              <span class="edit_style" @click="handleDel(scope.row)">移除</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="仓库名称" prop="name" />
          <el-table-column align="center" label="仓库代码" prop="code" />
          <el-table-column align="center" label="仓库类型" prop="type_text" />
          <el-table-column align="center" label="上级仓库" prop="parent_warehouse" />
          <el-table-column align="center" label="仓库地址" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.state }}/{{ scope.row.city }}/{{ scope.row.street }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="仓库邮编" prop="zipcode" />
          <el-table-column align="center" label="状态" prop="is_active_text" />
          <el-table-column align="center" label="创建人" prop="created_by_name" />
          <el-table-column align="center" label="创建时间" prop="created_at" width="150px" />
          <el-table-column align="center" label="修改人" prop="updated_by_name" />
          <el-table-column align="center" label="修改时间" prop="updated_at" width="150px" />
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer-center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { seeBindWarehouse, warehouseList } from '@/utils/publicData'
export default {
  name: 'BindWarehouseDialog',
  data() {
    return {
      visible: false,
      name: '',
      id: '',
      tableLoading: false,
      warehouseListData: [], // 仓库列表
      unwarehouseListData: [], // 已绑定的仓库列表 - 前端列表
      loadingdialog: false,
      selectWarehouseIds: [] // 已绑定的仓库ids - 后台已经绑定的
    }
  },
  created() {},
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.id = id
      vm.visible = true
      vm.initWarehouseList(vm.id)
    },

    cancel() {
      const vm = this
      vm.name = ''
      vm.unwarehouseListData = []
      vm.warehouseListData = []
      vm.visible = false
    },

    // 提交
    submit() {
      const vm = this
      if (vm.unwarehouseListData.length <= 0) {
        vm.$message.error('请至少选择一个仓库')
      } else {
        const warehouse = vm.unwarehouseListData.map(arr => {
          return {
            warehouse_id: arr.parent_id,
            warehouse_fictitious_id: arr.id
          }
        })
        vm.$http
          .put(`/company/bindWarehouse/${vm.id}`, { warehouse: warehouse })
          .then(res => {
            if (res.code === 10000) {
              vm.$message.success('绑定成功')
              this.visible = false
              this.$emit('submit')
              vm.handleCancelBindWarehouse()
            }
          })
      }
    },

    // 刷新
    refresh() {
      const vm = this
      vm.name = ''
      vm.query()
    },

    // 查询已绑定仓库
    initWarehouseList(id) {
      this.visible = true
      this.loadingdialog = true
      seeBindWarehouse(id,'companys').then(tag => {
        this.selectWarehouseIds = tag.map(arr => {
          return arr.warehouse_fictitious_id
        })
        warehouseList().then(data => {
          this.setWarehouseList(data)
          this.changeWater()
          this.loadingdialog = false
        })
      })
    },

    // 查询 仓库
    query() {
      const vm = this
      vm.tableLoading = true
      warehouseList(vm.name).then(res => {
        vm.warehouseListData = res
        vm.changeWater()
        vm.tableLoading = false
      })
    },

    // 设置 warehouseList
    setWarehouseList(data) {
      const vm = this
      data.forEach(element => {
        if (vm.selectWarehouseIds.includes(element.id)) {
          vm.unwarehouseListData.push(element)
        } else {
          vm.warehouseListData.push(element)
        }
      })
    },

    // 绑定
    handlebind(tag, type) {
      const data = this.warehouseListData.splice(
        this.warehouseListData.indexOf(tag),
        1
      )
      this.unwarehouseListData.push(data[0])
      this.changeWater()
    },

    // 移除人员
    handleDel(row, type) {
      const unIndex = this.unwarehouseListData.find(e => e.id === row.id)
      const [data] = this.unwarehouseListData.splice(
        unIndex,
        1
      )
      const index = this.warehouseListData.find(e => e.id === row.id)
      if (index === -1) {
        this.warehouseListData.push(data)
      }
      this.changeWater()
    },

    // 修改使选中仓库的上级仓库不可选择
    changeWater() {
      // 获取所有的已选中仓库上级仓库
      const dataArrParentId = this.unwarehouseListData.map(arr => {
        return arr.parent_id
      })
      // 修改未选中仓库是否可选
      this.warehouseListData = this.warehouseListData.map(arr => {
        if (dataArrParentId.includes(arr.parent_id)) {
          arr.isDisable = false
        } else {
          arr.isDisable = true
        }
        return arr
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter-container {
    border: none;
  }
</style>
